
body
{
	background-color: #000;
	background-image: url('/admin/public/img/control_bg.jpg');
	background-position: top center;
}

.empter
{
	height: 150px;
}

#formContainer{ 
  width:288px; 
  height:321px; 
  margin:0 auto; 
  position:relative; 
  z-index:1; 
   
  -moz-perspective: 800px; 
  -webkit-perspective: 800px; 
  perspective: 800px; 
} 

#formContainer form{ 
  width:100%; 
  height:100%; 
  position:absolute; 
  top:0; 
  left:0; 
   
  /* Enabling 3d space for the transforms */ 
  -moz-transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
   
  /* When the forms are flipped, they will be hidden */ 
  -moz-backface-visibility: hidden; 
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; 
   
  /* Enabling a smooth animated transition */ 
  -moz-transition:0.8s; 
  -webkit-transition:0.8s; 
  transition:0.8s; 
   
  /* Configure a keyframe animation for Firefox */ 
  -moz-animation: pulse 2s infinite; 
   
  /* Configure it for Chrome and Safari */ 
  -webkit-animation: pulse 2s infinite; 
} 

/* Firefox Keyframe Animation */ 
@-moz-keyframes pulse{ 
  0%{ box-shadow:0 0 1px #008aff;} 
  50%{ box-shadow:0 0 15px #008aff;} 
  100%{ box-shadow:0 0 1px #008aff;} 
} 

/* Webkit keyframe animation */ 
@-webkit-keyframes pulse{ 
  0%{ box-shadow:0 0 1px #008aff;} 
  50%{ box-shadow:0 0 15px #008aff;} 
  100%{ box-shadow:0 0 1px #008aff;} 
} 

#login{ 
  background:url('/admin/public/img/login_form_bg.jpg') no-repeat; 
  z-index:100; 
} 

#recover{ 
  background:url('/admin/public/img/recover_form_bg.jpg') no-repeat; 
  z-index:1; 
  opacity:0; 
   
  /* Rotating the recover password form by default */ 
  -moz-transform:rotateY(180deg); 
  -webkit-transform:rotateY(180deg); 
  transform:rotateY(180deg); 
} 

#formContainer.flipped #login{ 
   
  opacity:0; 
   
  /** 
  * Rotating the login form when the 
  * flipped class is added to the container 
  */ 
   
  -moz-transform:rotateY(-180deg); 
  -webkit-transform:rotateY(-180deg); 
  transform:rotateY(-180deg); 
} 

#formContainer.flipped #recover{ 
   
  opacity:1; 
   
  /* Rotating the recover div into view */ 
  -moz-transform:rotateY(0deg); 
  -webkit-transform:rotateY(0deg); 
  transform:rotateY(0deg); 
} 

/*---------------------------- 
  Inputs, Buttons & Links 
-----------------------------*/ 

#login .flipLink, 
#recover .flipLink{ 
   
  /* The blue ribbon links */ 
   
  height: 65px; 
  overflow: hidden; 
  position: absolute; 
  right: 0; 
  text-indent: -9999px; 
  top: 0; 
  width: 65px; 
} 

#recover .flipLink{ 
  right:auto; 
  left:0; 
} 

#login:after{ 
  /* The "Click here" tooltip */ 
  width:98px; 
  height:16px; 
  content:''; 
  background:url('/admin/public/img/click_here.png') no-repeat; 
  position:absolute; 
  right:-120px; 
  top:22px; 
} 

input[type=text],input[type=password],input[type=email]{ 
  /* The text fields */ 
  font: 15px 'Segoe UI',Arial,sans-serif; 
  border: none; 
  background:none; 
  height: 36px; 
  left: 26px; 
  position: absolute; 
  top: 176px; 
  width: 234px; 
  text-indent: 8px; 
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 
  color:#eee; 
  outline:none; 
} 

#loginPass{ 
  top: 215px; 
} 

#recoverEmail{ 
  top:215px; 
} 

input[type=submit]{ 
   
  /* Submit button */ 
   
  opacity:0.9; 
  position:absolute; 
  top:262px; 
  left:25px; 
  width: 239px; 
  height:36px; 
  cursor:pointer; 
  border-radius:6px; 
  box-shadow:0 1px 1px #888; 
  border:none; 
  color:#fff; 
  font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif; 
   
  /* CSS3 Gradients */ 
   
  background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); 
  background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); 
  background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); 
  background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); 
  background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); 
   
  background-image: -webkit-gradient( 
  linear, 
  left bottom, 
  left top, 
  color-stop(0.5, rgb(80,102,127)), 
  color-stop(0.5, rgb(87,109,136)), 
  color-stop(1, rgb(106,129,155)) 
  ); 
} 

input[type=submit]:hover{ 
  opacity:1; 
} 

input::-webkit-input-placeholder { 
  color:#eee; 
}
